<template>
    <div class="hpx_tabs">
        <div class="el-icon-arrow-left float_left" @click="scroll_left"></div>
        <div class="tab_content" :style="x_pos">
            <slot></slot>
        </div>
        <div class="el-icon-arrow-right float_right" @click="scroll_right"></div>
    </div>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator';

  @Component({
      computed: {
            x_pos () {
                return `transform: translateX(${ this.x }px)`
                // return `left: ${ this.x }px`
            }          
      }
  })
  export default class Tabs extends Vue {
    x:number = 0
    scroll_left(e: Event) {
        // console.log(e, 'left');
        this.x+=100;
    }
    scroll_right(e: Event) {
        // console.log(e, 'right');
        this.x-=100;
    }
  }
</script>

<style lang="scss" scoped>
    .hpx_tabs {
        overflow-x: hidden;
        position: relative;
        white-space: nowrap;
        padding: 5px 0;
        // box-shadow: 2px 2px 10px 0px $__color-line;
        border-bottom: 1px solid $__color-line;
        user-select: none;
        &>div {
            display: inline-block;
            line-height: 32px;
            background-color: white;
            cursor: pointer;
        }
    }
    .tab_content {
        // position: relative;
        margin: 0 20px;
        transition: all .3s;
    }
    .float_left, .float_right {
        width: 20px;
        z-index: 1;
    }
    .float_left {
        position: absolute;
        left: 0;
    }
    .float_right {
        position: absolute;
        right: 0;
    }
</style>